Курс по React JS Material UI 2017

Данный курс посвящен технологии, которая очень просто позволяет создавать приложения на Material Design от компании Google без написания стилей.
Библиотека material-ui предназначена для javascript библиотеки React и представляет из себя набор компонентов, которые можно по-разному настраивать и подключать.
В процессе данного курса вы повторите азы React JS и узнаете, как работать с библиотекой material-ui, начиная с работы с документацией и заканчивая создание красивых интерфейсов.
В результате курса мы напишем небольшое приложение, на котором мы разберем основные элементы material design и основы React JS.

Урок 1. React JS Material UI. Настройка React JS:
От автора: с этого урока мы начнем настраивать рабочее окружение для того, чтобы работать с библиотекой material-ui.
Из урока вы узнаете, как максимально быстро и эффективно развернуть рабочее окружение для React JS. Данный урок – это настройка React JS.


Урок 2. React JS Material UI. Настройка Material UI:
От автора: в этом уроке мы настроим material ui на наш проект и запустим первый компонент.
Из урока вы узнаете, как установить и подключить material ui на react проект. Помимо самого material ui мы подключим еще несколько модулей для корректной работы библиотеки.


Урок 3. React JS Material UI. Создание шапки приложения:
От автора: с этого урока мы начнем создания нашего приложения на material design и начнем с шапки приложения.
Из урока вы узнаете, как начать приложение и как пользоваться документацией для максимально эффективного создания элементов использую material desing.


Урок 4. React JS Material UI. Создание левого меню:
От автора: в этом уроке мы продолжим создание приложение и создадим левое меню, которое будет с анимацией вызываться по требованию.
Из урока вы узнаете, как создать левое меню, которое есть у большинства приложений на material design. Также мы зададим функционал по открытия данного меню по требованию.


Урок 5. React JS Material UI. SVG иконки:
От автора: в material ui библиотеке есть возможность использования 2х видов иконок — svg и font. Есть некоторые важные особенности при их использовании, и в этом уроке мы разберем SVG.
Из урока вы узнаете пользоваться SVG иконками, как создавать свои и как пользоваться уже встроенными. Также, использую библиотеку material icons вы узнаете, как можно встроить любую иконку и как ее найти.
В результате урока мы сделаем несколько иконок для левого меню и зададим им анимации.


Урок 6. React JS Material UI. Font иконки:
От автора: в этом уроке мы продолжим работу с иконками и в этот раз поговорим про font шрифты.
Из урока вы узнаете, как пользоваться Font иконками, какие есть особенности при их использовании и как избежать ошибки их подключения.


Урок 7. React JS Material UI. Кнопки:
От автора: material ui обладает большим количеством разнообразных кнопок и их дизайном, мы разберем как создавать любой их вид, используя документацию.
Из урока вы узнаете, как создавать любого вида кнопки в рамках material ui и вы узнаете, как давать обработчики события по ним, использую ReactJS.


Урок 8. React JS Material UI. Списки:
От автора: в этом уроке мы займемся выводом списка элементов в нашем приложении использую компоненты material ui.
Из урока вы узнаете, как с помощью react js и material ui вывести очень красивый список элементов и кастомизировать их разными атрибутами, например, анимациями.


Урок 9. React JS Material UI. Чекбоксы:
От автора: в этом уроке мы продолжим работу над элементами списка и добавим в них возможность выбора при помощи чекбоксов.
Из урока вы узнаете, как красиво добавить элемент выбора — input checkbox для каждого элемента списка. В рамках библиотеки material ui вы можете кастомизировать чекбоксы как угодно, например, задавая им любую форму из списка всех иконок.


Урок 10. ReactJS Material UI. Удаление элементов из списка:
От автора: в этом уроке мы реализуем функционал по удалению элементов из списка используя возможности reactjs.
Из урока вы узнаете, как с помощью reactjs вы можете удалять элементы из списка. В результате урока будет реализован следующий функционал — при нажатии на кнопку удалить (если есть выбранные элементы) будут удалены элементы из списка. Если ни одного не выбрано, то в таком случае кнопки будет заблокирована.


Урок 11. ReactJS Material UI. Popover:
От автора: в этом уроке вы познакомитесь еще с одним очень интересным компонентом библиотеки material ui – popover.
Из урока вы узнаете, как использовать компонент popover. Popover состоит из 2х слов — pop (всплывать) и over (над), то есть это некоторый контейнер, который появляется над контентом в определенном месте. В этом уроке вы узнаете, как корректно его использовать, передавать в него контент, и привязывать к определенному элементу.


Урок 12. ReactJS Material UI. Текстовые поля:
От автора в этом уроке мы начнем разбирать как кастомизировать и управлять текстовыми полями.
Из урока вы узнаете, как использовать текстовые поля, применяя к ним такие понятия как floating label (анимированный плавающий лэйбл) и другие атрибуты material ui.


Урок 13. ReactJS Material UI. Добавление элементов:
От автора: в этом уроке мы реализуем функционал по добавлению элементов в список.
Из урока вы узнаете, как добавить красивую валидацию на элементы input в форме, и так же мы реализуем функционал по добавлению элементов в список с помощью reactjs.


Урок 14. ReactJS Material UI. Модальное окно:
От автора: в этом уроке мы рассмотри еще один часто используемый компонент — диалоговое окно.
Из урока вы узнаете, как правильно подключить модальное окно, как ему задать контент и реализовать функционал по его открытию и закрытию.


Урок 15. ReactJS Material UI. Плагин выбора даты:
От автора: в этом уроке мы рассмотри еще один очень мощный компонент material ui — плагин выбора даты.
Из урока вы узнаете, как правильно подключить плагин по выбору даты на material ui, как его кастомизировать и обрабатывать его изменению. Мы рассмотрим 2 типа дизайна плагина, и вы еще узнаете что такое глобальный объект Intl.


Урок 16. ReactJS Material UI. Плагин нотификации:
От автора: в данном заключительном уроке мы рассмотрим последний плагин — нотификацию, которая показывает определенный текст пользователю и подведем итоги курса.
Из урока вы узнаете, как подключить и кастомизировать плагин нотификации в material ui и будем выводить в нем сообщение об изменении даты. В конце урока мы подведем итоги курса.